{% extends 'common/layout.html' %}

{% block content %}

    <!-- 面板 -->
    <div class="layui-panel"
         style="height: 240px;background-color: #EC4899;border-radius: 10px;text-align: center;color: white;">
        <div style="font-size: 56px;margin: 20px;">欢迎来到我们的商店
        </div>
        <div style="font-size: 28px;margin: 20px;">找到你需要的一切</div>
        <div>
            <button class="layui-btn" style="background-color: white;color: #EC4899FF;"><a
                    href="{% url 'content:商品列表' %}?id=">立即购物</a></button>
        </div>
    </div>

    <!-- 商品展示 -->
    <div style="text-align: center;background-color: #F3F4F6;border-radius: 10px">
        <h1 style="margin: 10px">推荐商品</h1>
        <div style="display: flex;padding: 20px;justify-content: space-around;border-radius: 10px">
            {% for item in recommend_data %}
                <div style="padding: 10px;background-color: white; border-radius: 10px">
                    <img src="{{ item.images.url|default:'' }}" width="200px" height="200px">
                    <h1 style="text-align: left;font-size: 18px;">{{ item.name }}</h1>
                    <h2 style="text-align: left;font-size: 18px;color: #EC4899FF">￥{{ item.price }}</h2>
                    <button id="search_button" class="layui-btn layui-bg-blue" style="width: 100%"><a
                            href="{% url 'content:商品详情' %}?id={{ item.id }}"
                            style="text-decoration: none; color: inherit;">查看详情</a></button>
                </div>

            {% endfor %}
        </div>
    </div>

    <!--商城标识-->
    <div style="position: fixed; bottom: 30px; left: 0; width: 100%; text-align: center; background-color: rgba(0, 0, 0, .85); padding: 20px; color: white;">
        <h1>ly商城@2024</h1>
        <span>隐私政策</span>
        <span>使用条款</span>
    </div>

{% endblock %}

